<template>
	<view class="success">
		<u-navbar :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32" :border-bottom="false">
			<view slot="right" class="color-FFFFFF u-font-32">查看详情</view>
		</u-navbar>
		<image class="page-bg" src="../../static/images/bg7@2x.png" mode=""></image>
		<view class="success-content">
			<view class="lucky-number-box u-flex u-flex-col u-row-center">
				<view class="period">
					<view class="color-FFFFFF u-font-28">第{{lunkyNumberList.periods_num}}期</view>
					<image class="period-bg" src="../../static/images/bg6@2x.png" mode=""></image>
				</view>
				<view class="u-font-60 color-F5B340 u-flex u-col-bottom">
					<view class="">{{lunkyNumberList.finish==0?"":lunkyNumberList.lucky_num}}</view>
					<view class="u-margin-left-10">
						<u-tag :text="lunkyNumberList.finish ==0?'未开奖':!lunkyNumberList.win?'未抢到':'中奖了'" shape="circle" :bg-color="lunkyNumberList.finish==0?'#F75F53':!lunkyNumberList.win?'#F75F53':'#76cf6d'" mode="dark" size="mini" />
					</view>
				</view>
				<view class="u-font-28 color-999999">您的幸运随机号码</view>
			</view>
			<view class="lucky-number-group u-margin-top-26">
				<scroll-view scroll-y="true" style="height: 70vh;">
					<view class="group-item u-flex u-col-center u-margin-bottom-20" v-for="(item,index) in lunkyNumberList.num_arr"
					 :key="item.id">
						<view class="u-flex-2 u-text-center u-font-32">第{{ index + 1 }}组</view>
						<view class="u-flex-8 u-flex u-col-center u-row-center">
							<view class="item-num color-FFFFFF u-text-center u-font-36 u-margin-right-10" v-for="(numitem,numindex) in item.lucky_num" :key="numindex">{{numitem}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {},
				collageId: "",
				lunkyNumberList: {}
			};
		},
		onLoad(options) {
			this.collageId = options.collage_id
			this.subscribeMessage()
		},
		onReady() {
			this.getLuckyNumber()
		},
		methods: {
			subscribeMessage(){
				uni.getSetting({
				   success(res) {
				      console.log(res.authSetting)
					  // if(){
						  
					  // }
				   }
				})
			},
			getLuckyNumber() {
				let params = {
					collage_id: this.collageId
				}
				this.$u.api.getLuckyNumber(params).then(res => {
					if (res.errno === "000") {
						this.lunkyNumberList = res.result.data
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	};
</script>

<style>
	.success {
		width: 100vw;
		height: 100vh;
		position: relative;
		background: rgb(241, 245, 246);
	}

	.page-bg {
		display: flex;
		width: 100%;
		height: 230rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.success-content {
		position: relative;
		z-index: 3;
	}

	.lucky-number-box {
		width: 702rpx;
		height: 200rpx;
		background: rgba(255, 255, 255, 1);
		border: 4rpx solid rgba(247, 138, 65, 1);
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.period {
		display: inline-block;
		position: relative;
		min-width: 260rpx;
		text-align: center;
		padding: 0 40rpx;
		top: -22rpx;
		box-sizing: border-box;
	}

	.period view {
		position: relative;
		z-index: 1;
	}

	.period-bg {
		position: absolute;
		width: 100%;
		height: 40rpx;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.lucky-number-group {
		width: 700rpx;
		margin: 0 auto;
	}

	.group-item {
		width: 100%;
		height: 120rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
	}

	.item-num {
		width: 60rpx;
		height: 60rpx;
		background: rgba(245, 179, 64, 1);
		border-radius: 50%;
		line-height: 60rpx;
	}
</style>
